<template>
 
  <div>
     <!-- <h1>photoList组件</h1> -->
     <div id="slider" class="mui-slider">

				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a  v-for="item in photoList" :key="item.id" :class="['mui-control-item',item.id==0?'mui-active':'']" @tap="getPhotosImage(item.id)" >
							{{ item.title }}
						</a>
					</div>
				</div>
  
      

			</div>
      <!-- 懒加载 -->
      <ul>
        <router-link v-for="item in photoImageList" :key="item.id" :to="'/index/photoInfo/'+item.id" tag="li">
          <img v-lazy="item.img_url">
          <div class="zhaiyao">
            <p class="title">
              {{ item.title }}
            </p>
            <div class="content">
              {{ item.zhaiyao }}
            </div>
          </div>
        </router-link>
      </ul>
   
  </div>
</template>


<script>
import mui from "../../lib/mui/js/mui.js";

export default {
  data() {
    return {
      photoList: [],
      photoImageList:[]
    };
  },
  mounted() {
    mui(".mui-scroll-wrapper").scroll({
      deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });
  },
  created() {
    this.getPhotoList()
    this.getPhotosImage(0)
  },
  methods: {
    //获取分类的title
    async getPhotoList() {
      const { data } = await this.$http.get("/api/getimgcategory");
      // console.log(data.message)
      if (data.status === 0) {
        data.message.unshift({ id: 0, title: "全部" });
        this.photoList = data.message;
      }
    },
    //获取图片列表分类的详情信息的图片，那个大方块的图片
    async getPhotosImage(cateid) {
       const { data }=await this.$http.get('/api/getimages/'+cateid)
      //  console.log(data)
       if(data.status===0){
         this.photoImageList=data.message
       }
    }
  }
};
</script>


<style lang="scss" scoped>
.mui-slider{
  overflow: visible;
}
.mui-fullscreen {
  padding-top: 40px;
}
#slider {
  touch-action: pan-x;
}
img{
  width:100%;
  height:100%;
  vertical-align: middle;
}
.mui-card{
  margin-top: 45px;
 
}
ul{
  padding: 0;
  margin: 0;
  padding: 10px;
  padding-top:0;
  li{
    position:relative;
    background-color:#000;
    text-align: center;
    list-style: none;
    margin-top: 8px;
    box-shadow: 0 0 7px #666;
    img[lazy=loading] {
      width: 40px;
      height: 300px;
      margin: auto;
    }
  }
  .zhaiyao{
    position:absolute;
    bottom:0;
    left:0;
    height:85px;
    background-color:rgba(0,0,0,.5);
    color:#fff;
    .title{
      font-size:14px;
      color:#fff;
      font-weight:700;
      margin-bottom: 0;
    }
    .content{
       font-size:14px;
       text-indent: 2em;
       text-align: left;
    }
  }
}
</style>
